<template>
  <Modal :title="title" v-model="modalVisible" :mask-closable="false" :width="800">
      <Form ref="form" :model="formdata" :label-width="100" :rules="formRules" >
          <FormItem :label="item.describe" :prop="index" v-for="(item, index) in formdata" :key="index">
              <!-- 文本输入框 -->
              <template v-if="item.type === 1">
                  <Input v-model="formdata[index].value" :placeholder="'请输入' + item.describe"/>
              </template>
              <!-- 下拉列表 -->
              <template v-else-if="item.type === 2">
                  <Select v-model="formdata[index].value" class="selected">
                      <Option :value="optionItem.value" v-for="(optionItem, index) in formdata[index].options" :key="index">{{optionItem.name}}</Option>
                  </Select>
              </template>
              <!-- 单选框 -->
              <template v-else-if="item.type === 3">
                  <RadioGroup v-model="formdata[index].value">
                      <Radio :label="optionItem.value" v-for="(optionItem, index) in formdata[index].options" :key="index">{{optionItem.name}}</Radio>
                  </RadioGroup>
              </template>
              <!-- 复选框 -->
              <template v-else-if="item.type === 4">
                  <CheckboxGroup v-model="formdata[index].value">
                      <Checkbox :label="optionItem.value" v-for="(optionItem, index) in formdata[index].options" :key="index">{{optionItem.name}}</Checkbox>
                  </CheckboxGroup>
              </template>
              <!-- 上传图片 -->
              <template v-else-if="item.type === 5">
                  <upload-pic-input v-model="formdata[index].value"></upload-pic-input>
              </template>
              <!-- 级联选择 -->
              <template v-else-if="item.type === 6">
                  <Cascader change-on-select v-model="formdata[index].value" :data="formdata[index].options" :load-data="loadData"></Cascader>
              </template>
              <!-- 副文本框 -->
              <template v-else-if="item.type === 7">
                  <editor id="editor" v-model="formdata[index].value" ref="editor"></editor>
              </template>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel">取消</Button>
        <Button type="primary"  @click="handleSubmit('form')">提交</Button>
      </div>
  </Modal>
</template>

<script>
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import editor from '@/views/my-components/xboot/editor'
export default {
    components: {
        uploadPicInput,
        editor
    },
    props: {
        title: {
            type: String
        },
        modalVisible: {
            type: Boolean
        },
        // formdata: {name : {value: value, type: 1, describe: '描述', options: options,}}  
        // type: 1 输入框  2 下拉列表   3 单选框  4 复选框  5 上传图片
        formdata: {
            type: Object
        },
        formRules: {
            type: Object
        }
    },
    data () {
        return {
            newFormData: {}
        }
    },
    methods: {
        loadData (item, callback) {
            // console.log(item)
            item.loading = true
            // v , l 是防止没有子类的情况下显示父类
            item.fn((res, v, l) => {
                
                if(res.success) {
                    item.loading = false
                    res.result.forEach(value => {
                        let obj = {}
                        obj.value = value.id
                        obj.label = value.title
                        item.children.push(obj)
                    })
                }else{
                    item.loading = false
                    item.children.push({
                        value: v,
                        label: l
                    })
                }
                callback()
            })
        },
        handleSubmit (name) {
            let data = this.formdata
            // 将输入的值按照{key: value}的形式返回
            for(let key in data) {
                if (Array.isArray(data[key].value)) {
                    // 级联选择器值是数组，这里取数组的最后一个值，，
                    let length = data[key].value.length
                    this.newFormData[key] = data[key].value[length-1]

                }else {

                    this.newFormData[key] = data[key].value
                }
                
            }
            // 注册提交表单事件，传递要添加的数据和表单ref
            this.$emit('handleSubmit', {
                data: this.newFormData,
                formName: name
            })
            
        },
        cancel () {
            this.$emit('cancel')
        }
    },
    created () {

    }
}
</script>

<style>
    .selected{
        width: 50%;
    }
</style>